<template>
    <div class="app-container">
        <el-card class="box-card form-container">
            <el-steps :active="active" align-center>
                <el-step title="请填写商品信息" />
                <el-step title="填写商品促销" />
                <el-step title="填写商品属性" />
                <el-step title="选择商品关联" />
            </el-steps>
            <div class="form-content">
                <ProductInfor @next="next" v-if="active === 1"></ProductInfor>
                <keep-alive>
                    <MerchandisePromotions @next="next" @previous="previous" v-if="active === 2"></MerchandisePromotions>
                </keep-alive>
                <keep-alive>
                    <ProductAttributes @next="next" @previous="previous" v-if="active === 3"></ProductAttributes>
                </keep-alive>
                <keep-alive>
                    <ProductAssociation @next="next" @previous="previous" v-if="active === 4"></ProductAssociation>
                </keep-alive>
            </div>
        </el-card>
    </div>
</template>

<!-- product/create -->

<script setup lang="ts">
import ProductInfor from "./components/ProductInfor.vue"
import MerchandisePromotions from "./components/MerchandisePromotions.vue"
import ProductAttributes from "./components/ProductAttributes.vue"
import ProductAssociation from "./components/ProductAssociation.vue"
import { ref } from 'vue'
import * as http from "@/request/http"
import { useToPro } from "@/store/AddToPro"

const useAddToPro = useToPro()

const active = ref(1)

const next = () => {
    if (active.value++ > 3) active.value = 1
}

const previous = () => {
    active.value--
}

http.productCategory.productCategoryListWithChildren().then(res => {
    useAddToPro.getList(res.data)
})

http.productCategory.brandList(1, 100).then(res => {
    useAddToPro.getBrandList(res.data.list)
})
</script>

<style scoped lang="less">
.form-container {
    width: 720px;
    padding: 35px 35px 15px 35px;
    margin: 0 auto;
    margin-bottom: 35px;

    .form-content {
        margin-top: 50px;
    }
}
</style>